<template>
  <div>
    <el-row :gutter="20">
      <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>

      <el-col :sm="17">
        <el-card style="background-color: rgba(255,255,255,0.9)" class="left-item">
          <div slot="header" class="total">
            <div class="titleIndex">
              <i v-if="selected" class="el-icon-back" @click="updateBlogList"></i>
              <span>{{ selectMethod }}</span>
            </div>
            <span>共 <span style="color: #3a8ee6; font-size: 20px">{{ total }}</span> 篇</span>
          </div>

          <el-row type="flex" align="middle" style="flex-wrap: wrap" :gutter="20" v-for="blog in blogList"
                  :key="blog.id"
                  @click.native="getBlogInfo(blog.id)"
                  shadow="never" class="blog-content"
          >
            <el-col :span="4">
              <el-image
                v-if="blog.blogPicType === '0' && blog.studentSex === '1'"
                style="width: 64px;height: 64px;margin-right: 20px"
                :src="require('@/assets/images/default_girl.png')"
                fit="cover" class="blogPic"
              >
              </el-image>

              <el-image
                v-if="blog.blogPicType === '0' && blog.studentSex === '0'"
                style="width: 64px;height: 64px;margin-right: 20px"
                :src="require('@/assets/images/default_boy.png')"
                fit="cover" class="blogPic"
              >
              </el-image>

              <div v-if="blog.contentType === '1'"
                style="font-size: 12px;display: flex;align-items: center">
                学生
                <span v-if="blog.studentSex === '0'" style="font-size: 12px" class="header"> {{
                    blog.studentName
                  }}</span>
                <span v-if="blog.studentSex === '1'" style="font-size: 12px;color: #b96ad9" class="header"
                > {{ blog.studentName }}</span>
              </div>

              <el-image
                style="width: 64px;height: 64px"
                v-if="blog.contentType === '2'" lazy
                :src="require('@/assets/images/class_record.jpg')"
              >
              </el-image>

              <div v-if="blog.contentType === '2'" style="font-size: 12px;display: flex;align-items: center">
               课堂记录
              </div>

              <!--studentTags-->
              <div class="user-info"
                   style="margin-top: 10px;display: table-cell;vertical-align: middle;text-align: left"
              >
                <el-tag style="display: inline-block;vertical-align: middle;margin: 3px 5px" effect="plain"
                        size="mini" v-for="(item, index) in blog.studentTags" :key="index" type="info"
                >
                  {{ item }}
                </el-tag>
              </div>
            </el-col>

            <el-col :span="13">
              <div>
                <h4 v-if="false">
                  <svg-icon icon-class="Topping" v-show="blog.top===1"/>
                  {{ blog.title }}
                </h4>

                <div v-if="false" style="margin-bottom: 10px;">
                  <span style="color: rgba(0, 0, 0, .4);font-size: small">内容简介: </span>
                  <span style="color: rgba(0, 0, 0, .4);font-size: small">  {{ blog.blogDesc }}</span>
                </div>

                <div v-if="false" style="margin-bottom: 10px;">
                  <span style="color: rgba(0, 0, 0, .4);font-size: small">标签: </span>
                  <el-tag effect="plain" size="mini" v-for="tag in blog.tags" :key="tag.tagId" type="success">
                    {{ tag.tagName }}
                  </el-tag>
                </div>

                <div style="margin-bottom: 30px;max-height: 200px;overflow: hidden;font-size: 12px"
                     v-html="blog.content"
                ></div>

                <div class="blog-info">
                  <div class="user-info" style="margin-right: 10px">
                    标题
                    <span style="margin-left: 10px;" class="header"> {{ blog.title }}</span>
                  </div>

                  <div>
                    浏览量
                    <span style="margin-left: 10px;"> {{ blog.views }}</span>
                  </div>

                  <div style="margin-left: 20px">
                    创建人
                    <span style="margin-left: 10px;"> {{ blog.createBy }}</span>
                  </div>
                </div>

                <div class="blog-info">
                  <div class="content-class">
                    创建时间:
                    <span style="margin-left: 10px;"> {{ blog.createTime }}</span>
                  </div>

                  <div class="content-class">
                    标签:
                    <span v-if="blog.tags.length > 0" style="color: #0f9d58" v-for="tag in blog.tags"
                          :key="tag.tagId"
                    >
                        {{ tag.tagName }}
                      </span>
                    <span v-if="blog.tags.length === 0" style="color: #0f9d58">
                        暂无标签
                      </span>
                  </div>

                  <div class="content-class">
                    校区:
                    <span v-if="blog.types.length > 0" style="color: #9a6e3a" v-for="tag in blog.types"
                          :key="tag.typeId"
                    >
                        {{ tag.typeName }}
                      </span>
                    <span v-if="blog.types.length === 0" style="color: #9a6e3a">
                        暂无分类
                      </span>
                  </div>
                  <div class="content-class">
                    记录编号:
                    <span style="color: red">{{ blog.id }}</span>
                  </div>
                </div>
              </div>
            </el-col>

            <el-col :span="7" style="padding-left: 10px">
              <div class="blog-info" style="font-size: 12px">
                评论列表
              </div>
              <span class="tmp"
                    v-if="blog.commentLists.length > 0"
                    style="color: #b94a48;font-size: 12px" v-for="(item,index) in blog.commentLists"
              >
                {{ item }}<br>
              </span>
              <span v-if="blog.commentLists.length === 0" style="color: #b94a48;font-size: 12px">
                暂无评论
              </span>
            </el-col>
          </el-row>

          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                      :limit.sync="queryParams.pageSize"
                      background layout="total, sizes, prev, pager, next, jumper" @pagination="getBlogList"
                      style="margin-bottom: 30px;float: right;margin-right: 10px;"
          />
        </el-card>
      </el-col>

      <el-col :sm="3">
        <el-card v-if="isLoginState" style="background-color: rgba(255,255,255,0.9)" class="right-item">
          <div slot="header" class="attributes">
            <el-tooltip class="item" effect="dark" content="点击进入系统" placement="top">
              <b @click="handleClick1"
                 style="font-size: 14px;cursor: pointer"
              >欢迎{{ name }}</b>
            </el-tooltip>
          </div>
        </el-card>

        <el-card v-if="false" style="background-color: rgba(255,255,255,0.9)" class="right-item">
          <div slot="header" class="attributes">
            <span style="font-size: 14px;cursor: pointer" @click="getMessagePage">我要留言</span>
          </div>
        </el-card>

        <el-card v-if="isLoginState" style="background-color: rgba(255,255,255,0.9)" class="right-item">
          <div slot="header" class="attributes">
            <span style="font-size: 14px;cursor: pointer" @click="getRecordType">我要记录</span>
          </div>
        </el-card>

        <el-card style="background-color: rgba(255,255,255,0.9)" class="right-item">
          <div slot="header" class="attributes">
            <span style="font-size: 14px;">搜索</span>
          </div>

          <div v-if="searchInput">
            <el-input style="height: 30px;margin-top: 5px;margin-bottom: 10px" @focus="checkInput"
                      @blur="notSearching()" class="search" placeholder="搜索内容"
                      prefix-icon="el-icon-search" v-model="queryInfo.query"
            >
            </el-input>
            <ul v-if="false">
              <li class="animate__animated animate__fadeInDown search-blog" v-for="blog in searchList" :key="blog.id"
                  @click="getBlogInfo(blog.id)"
              >
                <a><span v-html="blog.title"></span></a>
              </li>
            </ul>
          </div>
        </el-card>

        <el-card style="background-color: rgba(255,255,255,0.9)" class="right-item">
          <div slot="header">
            <span style="font-size: 14px;cursor: pointer">筛选</span>
          </div>

          <el-select style="width: 100%;height: 30px;margin-top: 5px;margin-bottom: 5px" v-model="queryInfo.studentId"
                     @change="searchByPeople($event,1)" placeholder="按学生名称筛选" filterable clearable
          >
            <el-option v-for="item in studentList" :key="item.studentId" :label="item.studentName"
                       :value="item.studentId"
            >
            </el-option>
          </el-select>

          <el-select style="width: 100%;height: 30px;margin-top: 5px;margin-bottom: 10px" v-model="queryInfo.createId"
                     @change="searchByPeople($event,2)" placeholder="按创建人名称筛选" filterable clearable
          >
            <el-option v-for="item in userList" :key="item.userId" :label="item.nickName"
                       :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-card>

        <el-card style="background-color: rgba(255,255,255,0.9)" class=" right-item">
          <div slot="header" class="attributes">
            <b style="font-size: 12px">校区</b>
          </div>
          <ul class=" blog-type-ul" style="margin-top: 5px;">
            <li style="font-size: 12px" class=" blog-type-li" v-for="cmsType in typeList" :key="cmsType.typeId"
                @click="selectType(cmsType)"
                :class="cmsType.typeId === typeId? 'activeType':''"
            >
              <div style="display: flex;align-items: center">
                <i class="el-icon-collection" style="margin:0 6px;"></i>
                {{ cmsType.typeName }}
              </div>
              <div>{{ cmsType.blogNum }}</div>
            </li>
          </ul>
          <div class="more" @click="dealType">
            <i v-if="moreType" class="el-icon-arrow-down"></i>
            <i v-else class="el-icon-arrow-up"></i>
          </div>
        </el-card>
        <el-card style="background-color: rgba(255,255,255,0.9)" class=" right-item">
          <div slot="header" class="attributes">
            <b style="font-size: 12px">标签</b>
          </div>
          <ul class=" blog-type-ul">
            <li style="font-size: 12px" class=" blog-type-li" v-for="tag in tagList" :key="tag.tagId"
                @click="selectTag(tag)"
                :class="tag.tagId === tagId? 'activeTag':''"
            >
              <div style="display: flex;align-items: center">
                <i class="el-icon-collection" style="margin:0 6px;"></i>
                {{ tag.tagName }}
              </div>

              <div class="tag">
                {{ tag.blogNum }}
              </div>
            </li>
          </ul>
          <div class="more" @click="dealTag">
            <i v-if="moreTag" class="el-icon-arrow-down"></i>
            <i v-else class="el-icon-arrow-up"></i>
          </div>
        </el-card>
        <el-card v-if="false" style="background-color: rgba(255,255,255,0.9)" class=" right-item">
          <div slot="header" class="attributes">
            <b style="font-size: 12px">最新</b>
          </div>
          <div style="font-size: 12px" class=" recommend-blog l-text" v-for="blog in recommendList" :key="blog.id"
               @click="getBlogInfo(blog.id)"
          >
            <a class="recommend-a">{{ blog.title }}</a>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">右侧占位</el-col>
    </el-row>

    <div v-if="!isLoginState" style="cursor: pointer" class="fixed bottom-6 right-6 z-50">
      <button
        class="w-14 h-14 bg-primary text-white rounded-full shadow-lg flex items-center justify-center transition-all
        duration-300 hover:bg-primary-dark hover:scale-110 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50"
        @click="handleClick"
      >登陆/注册
        <i class="fa-solid fa-plus text-xl"></i>
      </button>
    </div>

    <el-dialog title="选择记录类型" :visible.sync="openType" width="800px" height="300px" append-to-body>
      <el-row type="flex" justify="center">
        <el-button @click="getWordCheckWindow" plain>单词考察</el-button>
        <el-button @click="examRecord" plain>考试记录</el-button>
        <el-button @click="getCooperateWindow" plain>跨部门配合诉求记录</el-button>
        <el-button @click="getClassRecordWindow" plain>课堂记录</el-button>
      </el-row>

      <el-row style="margin-top: 20px" type="flex" justify="center">
        <el-button @click="customerRecord" plain>客户诉求记录</el-button>
        <el-button @click="relationInfoRecord" plain>相关注册记录</el-button>
        <el-button @click="studentRecord" plain>新学员信息记录</el-button>
        <el-button @click="getRecordPage" plain>其它</el-button>
      </el-row>
    </el-dialog>

    <el-dialog title="考试记录" :visible.sync="examWindow" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">

        <el-form-item label="校区" prop="type">
          <el-select style="width: 100%" v-model="form.typeId" placeholder="请选择"
                     filterable clearable>
            <el-option v-for="item in typeOptions" :key="item.typeId" :label="item.typeName"
                       :value="item.typeId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学生" prop="studentId">
          <el-select style="width: 100%" v-model="form.studentId" @change="getSelectStudent" placeholder="请选择"
                     filterable clearable>
            <el-option v-for="item in studentList" :key="item.studentId" :label="item.studentName"
                       :value="item.studentId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="考试类别" prop="examType">
          <el-select style="width: 100%" v-model="form.examType" placeholder="请选择"
                     filterable clearable>
            <el-option
              v-for="dict in dict.type.record_exam_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item v-if="form.examType !== '' && form.examType === '0'" label="分数" prop="examType">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-input style="width: 60px" v-model="form.score1" placeholder="总分"></el-input>
            </el-col>
            <el-col :span="4">
              <el-input style="width: 60px" v-model="form.score2" placeholder="听力"></el-input>
            </el-col>
            <el-col :span="4">
              <el-input style="width: 60px" v-model="form.score3" placeholder="口语"></el-input>
            </el-col>
            <el-col :span="4">
              <el-input style="width: 60px" v-model="form.score4" placeholder="阅读"></el-input>
            </el-col>
            <el-col :span="4">
              <el-input style="width: 60px" v-model="form.score5" placeholder="写作"></el-input>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item v-if="form.examType !== '' && form.examType !== '0'" label="分数" prop="examType">
          <el-input-number style="width: 100%" v-model="form.score" placeholder="请输入分数"></el-input-number>
        </el-form-item>

        <el-form-item label="考试日期" prop="date">
          <el-date-picker style="width: 100%"
                          v-model="form.date"
                          type="date"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitExamForm(1)">提 交</el-button>
        <el-button type="info" @click="submitExamForm(0)">暂 存</el-button>
        <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新学员信息记录" :visible.sync="studentWindow" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="姓名" prop="studentName">
          <!--          <el-input v-model="form.studentName"></el-input>-->
          <el-select style="width: 100%" v-model="form.studentId" @change="getSelectStudent"
                     placeholder="请选择(需要先录入系统)"
                     filterable clearable>
            <el-option v-for="item in studentList" :key="item.studentId" :label="item.studentName"
                       :value="item.studentId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.studentSex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="就读学校" prop="school">
          <el-input v-model="form.school"></el-input>
        </el-form-item>

        <el-form-item label="年级" prop="grade">
          <el-input v-model="form.grade"></el-input>
        </el-form-item>

        <el-form-item label="英语学习情况" prop="text">
          <el-input type="textarea" :rows="3" maxlength="80" v-model="form.text" placeholder="请输入"/>
        </el-form-item>

        <el-form-item label="性格" prop="nature">
          <el-input type="textarea" :rows="3" maxlength="80" v-model="form.nature" placeholder="请输入"/>
        </el-form-item>

        <el-form-item label="课程顾问" prop="adviser">
          <el-input v-model="form.adviser"></el-input>
        </el-form-item>

        <el-form-item label="校区" prop="type">
          <el-select style="width: 100%" v-model="form.typeId" placeholder="请选择"
                     filterable clearable>
            <el-option v-for="item in typeOptions" :key="item.typeId" :label="item.typeName"
                       :value="item.typeId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="其它" prop="other">
          <el-input type="textarea" :rows="3" maxlength="80" v-model="form.other" placeholder="请输入"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitStudentForm(1)">提 交</el-button>
        <el-button type="info" @click="submitStudentForm(0)">暂 存</el-button>
        <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="相关注册记录" :visible.sync="relationInfoResult" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="登录网址" prop="website">
          <el-input v-model="form.website">
            <!--            <template slot="prepend">http://</template>-->
          </el-input>
        </el-form-item>

        <el-form-item label="账户类型" prop="accountType">
          <el-input v-model="form.accountType"></el-input>
        </el-form-item>

        <el-form-item label="注册账号" prop="account">
          <el-input v-model="form.account"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password"></el-input>
        </el-form-item>

        <el-form-item label="校区" prop="type">
          <el-select style="width: 100%" v-model="form.typeId" placeholder="请选择"
                     filterable clearable>
            <el-option v-for="item in typeOptions" :key="item.typeId" :label="item.typeName"
                       :value="item.typeId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学生" prop="studentId">
          <el-select style="width: 100%" v-model="form.studentId" @change="getSelectStudent" placeholder="请选择"
                     filterable clearable>
            <el-option v-for="item in studentList" :key="item.studentId" :label="item.studentName"
                       :value="item.studentId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRelationForm(1)">提 交</el-button>
        <el-button type="info" @click="submitRelationForm(0)">暂 存</el-button>
        <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog title="客户诉求记录" :visible.sync="customerRecordResult" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="校区" prop="type">
          <el-select style="width: 100%" v-model="form.typeId" placeholder="请选择"
                     filterable clearable>
            <el-option v-for="item in typeOptions" :key="item.typeId" :label="item.typeName"
                       :value="item.typeId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学生" prop="studentId">
          <el-select style="width: 100%" v-model="form.studentId" @change="getSelectStudent" placeholder="请选择"
                     filterable clearable>
            <el-option v-for="item in studentList" :key="item.studentId" :label="item.studentName"
                       :value="item.studentId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="客户诉求" prop="text">
          <el-input type="textarea" :rows="5" maxlength="200" v-model="form.text" placeholder="请输入内容"/>
        </el-form-item>

        <el-form-item label="诉求时间" prop="time">
          <el-time-picker style="width: 100%"
                          v-model="form.time"
                          placeholder="诉求时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="问题已解决?" prop="result">
          <el-radio-group v-model="form.result">
            <el-radio :label="0">未解决</el-radio>
            <el-radio :label="1">已解决</el-radio>
            <el-radio :label="2">需知悉</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCustomerForm(1)">提 交</el-button>
        <el-button type="info" @click="submitCustomerForm(0)">暂 存</el-button>
        <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="课堂记录" :visible.sync="classRecordWindow" width="1000px" append-to-body>

      <!-- 两列布局容器 -->
      <el-row :gutter="20" class="dialog-content">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">

          <!-- 左侧列：占 宽度 -->
          <el-col :span="12" class="left-column">
            <div class="column-content">

              <el-form-item label="校区" prop="type">
                <el-select style="width: 100%" v-model="form.typeId" placeholder="请选择"
                           filterable clearable>
                  <el-option v-for="item in typeOptions" :key="item.typeId" :label="item.typeName"
                             :value="item.typeId">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="课堂编号" prop="classNumber">
                <el-input v-model="form.classNumber" placeholder="请输入课堂编号"/>
              </el-form-item>

              <el-form-item label="上课日期" prop="classDate">
                <el-date-picker clearable size="small"
                                style="width: 100%"
                                v-model="form.classDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择时间">
                </el-date-picker>
              </el-form-item>

              <el-form-item label="上课时间" prop="text">
                <el-time-select
                  placeholder="起始时间"
                  style="width: 100%"
                  v-model="form.startTime"
                  :picker-options="{
                    start: '08:00',
                    step: '00:15',
                    end: '21:00'
                  }">
                </el-time-select>
                <el-time-select
                  placeholder="结束时间"
                  style="width: 100%"
                  v-model="form.endTime"
                  :picker-options="{
                    start: '08:00',
                    step: '00:15',
                    end: '22:30',
                    minTime: form.startTime
            }">
                </el-time-select>
              </el-form-item>

              <el-form-item label="上课内容" prop="text">
                <el-input type="textarea" :rows="5" maxlength="400" v-model="form.text" placeholder="请输入内容"/>
              </el-form-item>

              <el-form-item label="课后作业" prop="text">
                <el-input type="textarea" :rows="3" maxlength="400" v-model="form.homework" placeholder="请输入内容"/>
              </el-form-item>

              <el-form-item label="所属年级" prop="text">
                <el-select @change="grandTypeChange"  style="width: 100%" v-model="form.gradeClass" placeholder="请选择">
                  <el-option
                    v-for="item in grandType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="课后单词背诵" prop="text">
                <el-cascader
                  style="width: 100%"
                  v-model="form.study"
                  :options="studyOptions"
                  @change="handleChange"></el-cascader>
              </el-form-item>
            </div>
          </el-col>

          <!-- 右侧列：占 宽度 -->
          <el-col :span="12" class="right-column">
            <div class="column-content">

              <el-form-item label="学生">
                <el-select style="width: 100%" multiple v-model="form.students" @change="getStudent_multiple"
                           placeholder="请选择"
                           filterable clearable>
                  <el-option v-for="item in studentList" :key="item.studentId" :label="item.studentName"
                             :value="item.studentId">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                v-for="(item, index) in form.students"
                :key="index"
                :label="getTagLabel(item)"
              >
                <el-input
                  style="width: 70%;margin-right: 15px"
                  v-model="formData[`${item}`]"
                  :placeholder="`请输入对此同学的评论`"
                  clearable
                ></el-input>
                <el-button  style="width: 25%"
                            @click="uploadStudentRecordPic(item)"
                            type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
              </el-form-item>
            </div>
          </el-col>
        </el-form>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitClassRecordForm(1)">提 交</el-button>
        <el-button type="info" @click="submitClassRecordForm(0)">暂 存</el-button>
        <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="图片上传" :visible.sync="blogFilesOpen" :before-close="closePicUpload" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-position="top" label-width="80px">
        <el-form-item>
          <el-row>
            <el-button size="mini" type="primary" @click="addFiles">添加文件</el-button>
            <el-table :data="form.blogFilesNew" :border="true" style="width: 99.99%;">
              <el-table-column align="center" min-width="25%" prop="pic" label="附件">
                <template slot-scope="scope">
                  <filesUpload v-model="scope.row.fileId" @handleFilesSuccess="filesSuccess" :is-show-tip="false"/>
                </template>
              </el-table-column>
              <el-table-column align="center" min-width="40%" prop="remark" label="文件信息">
                <template slot-scope="scope">
                  <el-row>
                    <el-col :span="6">
                      <div class="blogFilesInfoName">名称：</div>
                    </el-col>
                    <el-col :span="18">
                      <el-input v-model="scope.row.fileOriginName" disabled/>
                    </el-col>
                  </el-row>
                  <el-row style="margin-top: 4px;">
                    <el-col :span="6">
                      <div class="blogFilesInfoName">大小：</div>
                    </el-col>
                    <el-col :span="18">
                      <el-input v-model="scope.row.fileSize" disabled/>
                    </el-col>
                  </el-row>
                  <el-row style="margin-top: 4px;">
                    <el-col :span="6">
                      <div class="blogFilesInfoName">类型：</div>
                    </el-col>
                    <el-col :span="18">
                      <el-input v-model="scope.row.fileSuffix" disabled/>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column align="center" min-width="15%" prop="remark" label="备注">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.remark" type="textarea" :rows="6" size="small"/>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="blogFilesOpen = false">{{uploadSuccessText}}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="跨部门配合诉求记录" :visible.sync="cooperateWindow" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="校区" prop="type">
          <el-select style="width: 100%" v-model="form.typeId" placeholder="请选择"
                     filterable clearable>
            <el-option v-for="item in typeOptions" :key="item.typeId" :label="item.typeName"
                       :value="item.typeId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学生" prop="studentId">
          <el-select style="width: 100%" v-model="form.studentId" @change="getSelectStudent" placeholder="请选择"
                     filterable clearable>
            <el-option v-for="item in studentList" :key="item.studentId" :label="item.studentName"
                       :value="item.studentId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="诉求内容" prop="text">
          <el-input type="textarea" :rows="5" maxlength="200" v-model="form.text" placeholder="请输入内容"/>
        </el-form-item>

        <el-form-item label="截止时间" prop="time">
          <el-date-picker
            style="width: 100%"
            v-model="form.time"
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCooperation(1)">提 交</el-button>
        <el-button type="info" @click="submitCooperation(0)">暂 存</el-button>
        <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="单词考察记录" :visible.sync="wordCheckResult" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="考察内容" prop="text">
          <el-input v-model="form.text" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="校区" prop="type">
          <el-select style="width: 100%" v-model="form.typeId" placeholder="请选择"
                     filterable clearable>
            <el-option v-for="item in typeOptions" :key="item.typeId" :label="item.typeName"
                       :value="item.typeId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学生" prop="studentId">
          <el-select style="width: 100%" v-model="form.studentId" @change="getSelectStudent" placeholder="请选择"
                     filterable clearable>
            <el-option v-for="item in studentList" :key="item.studentId" :label="item.studentName"
                       :value="item.studentId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="正确率" prop="rate">
          <el-input placeholder="请输入内容" v-model="form.rate">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-date-picker style="width: 100%"
                          v-model="form.date"
                          type="date"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="开始时间" prop="time1">
          <el-time-picker style="width: 100%"
                          v-model="form.time1"
                          :picker-options="{
              selectableRange: '08:00:00 - 21:30:00'
            }"
                          placeholder="开始时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="time2">
          <el-time-picker style="width: 100%"
                          el-time-picker
                          v-model="form.time2"
                          :picker-options="{
               selectableRange: '08:00:00 - 21:30:00'
            }"
                          placeholder="开始时间">
          </el-time-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm(1)">提 交</el-button>
        <el-button type="info" @click="submitForm(0)">暂 存</el-button>
        <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改文章管理对话框 -->
    <el-dialog title="添加事件记录" :visible.sync="open" :before-close="cancel" width="1200px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题"/>
        </el-form-item>

        <el-row>
          <el-col :span="24">
            <el-form-item label="简介">
              <el-input type="textarea" v-model="form.blogDesc" :autosize="{ minRows: 3, maxRows: 7}" maxlength="50"
                        show-word-limit placeholder="请输入简介"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="内容">
          <el-row style="margin-bottom: 20px;">
            <Tinymce :height="400" v-model="form.content"></Tinymce>
          </el-row>
        </el-form-item>

        <el-row>
          <el-col :span="24">
            <el-form-item label="标签" prop="tag">
              <el-checkbox-group v-model="form.tagIds">
                <el-checkbox v-for="item in tagOptions" :label="item.tagId" :key="item.tagId" :value="item.tagId">
                  {{ item.tagName }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="校区" prop="type">
              <el-checkbox-group v-model="form.typeIds">
                <el-checkbox v-for="item in typeOptions" :label="item.typeId" :key="item.typeId" :value="item.typeName">
                  {{ item.typeName }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="7">
            <el-form-item label="学生" prop="studentId">
              <el-select v-model="form.studentId" @change="getSelectStudent" placeholder="请选择" filterable clearable>
                <el-option v-for="item in studentList" :key="item.studentId" :label="item.studentName"
                           :value="item.studentId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="置顶">
              <el-checkbox v-model="top"></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="附件">
              <el-upload
                class="upload-demo"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-progress="handleFileUploadProgress"
                :on-remove="handleRemove"
                :on-success="handleUploadSuccess"
                :file-list="fileList"
                :headers="headers"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>

              <!--              <files-upload v-model="form.blogFilesNew"></files-upload>-->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="releaseForm">提 交</el-button>
        <el-button type="info" @click="saveForm">暂 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/display.css'
import {Loading} from 'element-ui'
import {
  addBlog,
  cmsListBlog,
  cmsListByTagId,
  cmsListByTypeId,
  cmsListRecommend,
  getBlog,
  getBlogDetail
} from '@/api/cms/blog'

import {parseTime, selectDictLabel} from "@/utils/ruoyi";

import {addFileBlogInfo,} from '@/api/cms/fileBlogInfo'

import {getToken} from '@/utils/auth'
import {mapGetters} from 'vuex'
import {listAllUser} from '../../api/system/user'
import {listStudentAll} from '../../api/teach/student'
import CherryMarkdown from "@/components/CherryMarkdown/index.vue";
import Tinymce from "@/components/Tinymce/index.vue";
import {delFileInfo} from "@/api/cms/fileInfo";
import filesUpload from '../cms/blog/components/filesUpload.vue'
import {getUuid} from '../../api/common'
import {bookAndUnitList} from "@/api/cms/class";

export default {
  name: 'cmsIndex',
  dicts: ['record_exam_type'],
  components: {filesUpload, Tinymce, CherryMarkdown},
  data() {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 8
      },
      intro: '',
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      blogList: [],
      typeList: [],
      tagList: [],
      selectStudentsList: [],
      fullTypeList: [],
      fullTagList: [],
      recommendList: [],
      fileList: [],
      selectMethod: '成长记录列表',

      selectedCount: 0, // 选择的输入框数量
      inputItems: [], // 用于循环生成输入框的数组
      formData: {}, // 存储输入框内容的对象
      formName: {}, // 存储输入框内容的对象
      selectedLabels: [],
      studyOptions: [],

      typeId: -1,
      tagId: -1,
      selected: false,
      moreType: true,
      moreTag: true,
      value: new Date(),
      timer: null,
      start: false,
      screenWidth: document.documentElement.clientWidth, //实时屏幕宽度
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        type: 1,
        content: null,
        top: null,
        views: null,
        status: null,
        createBy: null
      },
      tagsList: [],
      // 总条数
      isLoginState: false,
      //search
      total: 0,
      searchInput: true,
      searching: false,
      searchList: [],
      //学生
      studentList: [],
      userList: [],
      grandType: [{
        value: '高中',
        label: '高中',
      },{
        value: '初中',
        label: '初中'
      }],

      //文章新增
      title: '',

      studentId: '',
      uploadSuccessText: '取消上传',
      lastUploadRecord: '',
      uploadStudentRecord:[],

      // 类型选项
      typeOptions: [],
      // 标签选项
      tagOptions: [],
      // 是否显示弹出层
      open: false,
      openType: false,
      openExam: false,
      examWindow: false,
      studentWindow: false,
      classRecordWindow: false,
      cooperateWindow: false,
      wordCheckResult: false,
      customerRecordResult: false,
      relationInfoResult: false,
      form: {
        blogFilesNew: [],
        blogPic:[]
      },
      top: false,
      fileIds: [],
      blogFilesOpen: false,
      // 表单校验
      rules: {
        title: [{
          required: true,
          message: '标题不能为空',
          trigger: 'blur'
        }],
        typeId: [{
          required: true,
          message: '校区不能为空',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '校区不能为空',
          trigger: 'blur'
        }],
        classNumber: [{
          required: true,
          message: '课堂编号为空',
          trigger: 'blur'
        }],
        classDate: [{
          required: true,
          message: '上课日期为空',
          trigger: 'blur'
        }],
        studentId: [{
          required: true,
          message: '学生不能为空',
          trigger: 'change'
        }]
      },
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  watch: {
    'queryInfo.query': {
      handler(value) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.searchBlog()
        }, 1000)
      }
    }
  },
  created() {
    this.login()
    this.initNessaryData()
    window.addEventListener('resize', this.screenAdapter)
  },
  mounted() {
    this.$nextTick(function () {
      // 仅在整个视图都被渲染之后才会运行的代码
      this.getTypeList()
      this.getBlogList()
      this.getTagList()
      // this.getRecommendList()
      // console.log('$nextTick is running')
      this.screenWidth = document.documentElement.clientWidth
    })
  },
  methods: {
    /** 获取成长记录列表 */
    async getBlogList() {
      let loadingInstance = Loading.service({
        target: '.left-item'
      })
      await cmsListBlog(this.queryParams).then(response => {
        if (response.code === 200) {
          this.blogList = this.picSrc(response.rows)
          // console.log(this.blogList)
        }
        this.total = response.total
      }).finally(() => {
        loadingInstance.close()
      })
    },
    searchByPeople(val, type) {
      // console.log(val)
      if (type === 1) {
        if (val !== '') {
          // console.log(this.queryInfo)
          this.queryInfo.studentId = val
        } else {
          this.queryInfo.studentId = null
        }
        this.searchByParams2()
      } else {
        if (val !== '') {
          // console.log(this.queryInfo)
          this.queryInfo.createId = val
        } else {
          this.queryInfo.createId = null
        }
        this.searchByParams2()
      }
    },
    searchByParams() {
      cmsListBlog(this.queryParams).then(response => {
        let listSize = response.rows.length
        if (listSize > 0) {
          for (let i = 0; i < listSize; i++) {
            response.rows[i].content = this.brightenKeyword(response.rows[i].content, this.queryInfo.query)
          }
        }
        this.searchList = response.rows
        this.total = response.total
        // console.log(this.searchList)
        if (this.searchList.length !== 0) {
          this.blogList = this.searchList
          this.searching = true
        }
      })
    },
    searchByParams2() {
      cmsListBlog(this.queryInfo).then(response => {
        // console.log(response)
        this.searchList = response.rows
        this.total = response.total
        if (this.searchList.length !== 0) {
          this.blogList = this.searchList
        } else {
          this.blogList = []
        }
      })
    },
    //------------------------------------------------------
    checkInput() {
      this.searching = this.queryInfo.query !== ''
    },
    grandTypeChange(val) {
      if (val === '') {
        return
      }
      // console.log(val)
      this.form.study = []
      if (val === '初中') {
        this.studyOptions = bookAndUnitList

      }
      else if (val === '高中') {
        this.studyOptions = this.generateBookUnitOptions(7, 6)
        this.studyOptions.push({
            value: 'review',label: 'review'
          },
          {
            value: '其它',label: '其它'
          })
      }
      else {
        this.studyOptions = []
      }
    },
    /** 查询学生信息列表 */
    initNessaryData() {
      listStudentAll(this.queryInfo).then(response => {
        // console.log(response);
        this.studentList = response.rows
      })

      listAllUser().then(res => {
        // console.log(res)
        if (res.code === 200) {
          this.userList = res.data
        }
      })

      getBlog().then(response => {
        this.typeOptions = response.types
        this.tagOptions = response.tags
      })
    },
    notSearching() {
      setTimeout(() => {
        this.searching = false
      }, 100)
    },
    async searchBlog() {
      // console.log(this.queryInfo.query)
      if (this.queryInfo.query === '') {
        this.searching = false
        this.queryParams.content = ''
      } else {
        this.queryParams.content = this.queryInfo.query
      }
      this.searchByParams()
    },
    //搜索关建字标红
    brightenKeyword(val, keyword) {
      // 去掉html 标签
      // val = val.replace(/<\/?[^>]+(>|$)/g, "")
      const Reg = new RegExp(keyword, 'i')
      let res = ''
      if (val) {
        res = val.replace(Reg, `<span style="color: red;background-color: yellow">${keyword}</span>`)
        return res
      }
    },
    //------------------------------------------------------
    handleClick() {
      this.$router.push({
        path: '/cmsLogin'
      })
    },
    handleClick1() {
      this.$router.push({
        path: '/index'
      })
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
      this.$modal.msg("文件上传" + file.response.msg)
    },
    handleFileUploadProgress() {
      this.form.blogFilesNew.push(
        {
          id: getUuid(),
          fileId: '',
          fileOriginName: '',
          fileSuffix: '',
          fileSize: '',
          filePath: '',
          remark: ''
        })
    },
    handleUploadSuccess(value) {
      this.form.blogFilesNew.forEach(item => {
        if (value.code === 200) {
          item.fileId = value.fileName
          item.fileOriginName = value.fileOriginName
          item.fileSuffix = value.fileSuffix
          item.fileSize = value.fileSize
          item.filePath = value.fileName
        }
      })
    },
    submitForm(status) {
      this.form.type = 1
      this.form.contentType = 1
      this.form.tagIds = [42]
      this.form.typeIds = [this.form.typeId]
      this.form.status = status  //0-暂存
      this.form.blogPic = ''
      // console.log(this.form)

      this.form.title = this.form.studentName + '-' + parseTime(this.form.date, '{y}-{m}-{d}') + '-' + '的单词考察记录'
      this.form.content = '<p>' + '考察内容:' + this.form.text + '</p>'
        + '<p>' + '时间范围:' + parseTime(this.form.time1, '{h}:{i}:00') + '至' + parseTime(this.form.time2, '{h}:{i}:00') + '</p>'
        + '<p>' + '考察结果:正确率为' + this.form.rate + '%' + '</p>'

      addBlog(this.form).then(response => {
        // console.log(response)
        if (response.code === 200) {
          this.$modal.msgSuccess('提交成功')
          this.wordCheckResult = false
          this.getBlogList()
        }
      })
    },
    openTypeWindow(windowName) {
      this.openType = false
      windowName = true
    },
    handleChange(val){
      console.log(val)
      console.log(val[0])
      // console.log(this.form.study)
    },
    generateBookUnitOptions(bookCount = 3, unitsPerBook = 5) {
      const options = [];

      // 循环生成书籍（第一级）
      for (let bookIndex = 1; bookIndex <= bookCount; bookIndex++) {
        const bookId = `book-${bookIndex}`;
        const bookLabel = `book${bookIndex}`;

        // 生成当前书籍下的单元（第二级）
        const children = [];
        for (let unitIndex = 1; unitIndex <= unitsPerBook; unitIndex++) {
          children.push({
            value: `${bookId}/unit-${unitIndex}`, // 单元值（唯一标识）
            label: `unit${unitIndex}` // 单元显示文本
          });
        }

        // 将书籍及其单元添加到选项中
        options.push({
          value: bookId, // 书籍值（唯一标识）
          label: bookLabel, // 书籍显示文本
          children: children // 子选项（单元）
        });
      }
      // console.log(options);
      return options;
    },
    customerRecord() {
      this.openType = false
      this.customerRecordResult = true
    },
    relationInfoRecord() {
      this.openType = false
      this.relationInfoResult = true
    },
    examRecord() {
      this.openType = false
      this.examWindow = true
    },
    studentRecord() {
      this.openType = false
      this.studentWindow = true
    },
    uploadStudentRecordPic(val){
      console.log(val)
      if (this.lastUploadRecord !== val && this.uploadStudentRecord.indexOf(val) === -1){
        this.form.blogFilesNew = []
      }
      else {
        this.uploadSuccessText = '已上传,关闭'
      }
      this.lastUploadRecord = val
      //存放学生姓名
      this.studentId =  this.studentList.find(item => item.studentId === val).studentName;
      this.blogFilesOpen = true
    },
    closePicUpload() {
      this.uploadSuccessText = '取消上传'
      this.blogFilesOpen = false
    },
    filesSuccess(value) {
      // console.log(value)
      let picPath = {}
      picPath.studentId = this.studentId
      this.form.blogFilesNew.forEach((item, index) => {
        if (item.fileId === value.fileId) {
          item.fileOriginName = value.fileOriginName
          item.fileSuffix = value.fileSuffix
          item.fileSize = value.fileSize
          item.filePath = value.filePath
          picPath['pic' + index] = value.filePath
        }
      })
      this.form.blogPic.push(JSON.stringify(picPath))
      this.uploadSuccessText = '已上传,关闭'
      this.uploadStudentRecord.push(this.studentId)
      // console.log(this.form)
    },
    addFiles() {
      this.form.blogFilesNew.push(
        {
          id: this.uuid(),
          fileId: '',
          fileOriginName: '',
          fileSuffix: '',
          fileSize: '',
          filePath: '',
          remark: ''
        })
    },
    submitCooperation(status) {
      this.form.type = 1
      this.form.contentType = 1
      this.form.tagIds = [43]
      this.form.typeIds = [this.form.typeId]
      this.form.status = status
      this.form.blogPic = ''

      this.form.title = this.form.studentName + '-' + parseTime(new Date(), '{y}-{m}-{d}') + '-' + '跨部门配合诉求记录'

      this.form.content = '<p>' + '诉求内容:' + this.form.text + '</p>'
        + '<p>' + '截止时间:' + parseTime(this.form.time, '{y}-{m}-{d} {h}:{i}:00') + '</p>'

      addBlog(this.form).then(response => {
        // console.log(response)
        if (response.code === 200) {
          this.$modal.msgSuccess('提交成功')
          this.cooperateWindow = false
          this.getBlogList()
        }
      })
    },
    submitCustomerForm(status) {
      this.form.type = 1
      this.form.contentType = 1
      this.form.tagIds = [37]
      this.form.typeIds = [this.form.typeId]
      this.form.status = status  //0-暂存
      this.form.blogPic = ''

      let res = ''
      if (this.form.result === 0) {
        res = '未解决'
      } else if (this.form.result === 1) {
        res = '已解决'
      } else if (this.form.result === 2) {
        res = '需知悉'
      }

      // let res = this.form.result === 1 ? '已解决' : '否'

      this.form.title = this.form.studentName + '-' + parseTime(new Date(), '{y}-{m}-{d}') + '-' + '的家长诉求记录'
      this.form.content = '<p>' + '客户诉求:' + this.form.text + '</p>'
        + '<p>' + '诉求时间:' + parseTime(this.form.time, '{h}:{i}:00') + '</p>'
        + '<p>' + '反映问题结果:' + res + '</p>'
      // console.log(this.form)

      addBlog(this.form).then(response => {
        // console.log(response)
        if (response.code === 200) {
          this.$modal.msgSuccess('提交成功')
          this.customerRecordResult = false
          this.getBlogList()
        }
      })
    },
    // 生成uuid
    uuid() {
      let d = new Date().getTime();
      if (window.performance && typeof window.performance.now === 'function') {
        d += performance.now() // use high-precision timer if available
      }
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        const r = (d + Math.random() * 16) % 16 | 0; // d是随机种子
        d = Math.floor(d / 16)
        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
      })
    },

    submitStudentForm(status) {
      this.form.type = 1
      this.form.contentType = 1
      this.form.tagIds = [39]
      this.form.typeIds = [this.form.typeId]
      this.form.status = status  //0-暂存
      let res = this.form.studentSex === '1' ? '女' : '男'
      this.form.blogPic = ''

      this.form.title = '新学员' + '-' + this.form.studentName + '-' + res + '-' + '的信息记录'
      this.form.content = '<p>' + '学员就读学校:' + this.form.school + '</p>'
        + '<p>' + '所在年级:' + this.form.grade + '</p>'
        + '<p>' + '英语学习情况:' + this.form.text + '</p>'
        + '<p>' + '学员性格:' + this.form.nature + '</p>'
        + '<p>' + '课程顾问:' + this.form.adviser + '</p>'
        + '<p>' + '其它:' + this.form.other + '</p>'

      // console.log(this.form)

      addBlog(this.form).then(response => {
        // console.log(response)
        if (response.code === 200) {
          this.$modal.msgSuccess('提交成功')
          this.studentWindow = false
          this.getBlogList()
        }
      })
    },

    submitRelationForm(status) {
      this.form.type = 1
      this.form.contentType = 1
      this.form.tagIds = [39]
      this.form.typeIds = [this.form.typeId]
      this.form.status = status  //0-暂存
      this.form.blogPic = ''

      let res = this.form.result === 1 ? '是' : '否'

      this.form.title = this.form.studentName + '-' + parseTime(new Date(), '{y}-{m}-{d}') + '-' + '的相关注册记录'
      this.form.content = '<p>' + '登录网址:' + this.form.website + '   账户类型:' + this.form.accountType + '</p>'
        + '<p>' + '注册账号:' + this.form.account + '    密码:' + this.form.password + '</p>'
      // console.log(this.form)

      addBlog(this.form).then(response => {
        // console.log(response)
        if (response.code === 200) {
          this.$modal.msgSuccess('提交成功')
          this.relationInfoResult = false
          this.getBlogList()
        }
      })
    },
    submitExamForm(status) {
      this.form.type = 1
      this.form.contentType = 1
      this.form.tagIds = [35]
      this.form.typeIds = [this.form.typeId]
      this.form.status = status  //0-暂存
      this.form.blogPic = ''

      let dictLabel = selectDictLabel(this.dict.type.record_exam_type, this.form.examType);
      // console.log(dictLabel);
      let score

      if (this.form.examType === '0') {
        score = '总分:' + this.form.score1 + '-' + '听力:' + this.form.score2 + '-'
          + '口语:' + this.form.score3 + '-' + '阅读:' + this.form.score4 + '-'
          + '写作:' + this.form.score5
      } else {
        score = '总分:' + this.form.score
      }

      this.form.title = this.form.studentName + '-' + dictLabel + '-' + '的考试记录'
      this.form.content = '<p>' + '考试类别:' + dictLabel + '</p>'
        + '<p>' + '考试日期:' + parseTime(this.form.date, '{y}-{m}-{d}') + '</p>'
        + '<p>' + '分数:' + score + '</p>'
      // console.log(this.form)

      addBlog(this.form).then(response => {
        // console.log(response)
        if (response.code === 200) {
          this.$modal.msgSuccess('提交成功')
          this.examWindow = false
          this.getBlogList()
        }
      })
    },
    submitClassRecordForm(status) {
      this.form.type = 1
      this.form.contentType = 2
      this.form.tagIds = [33]
      this.form.typeIds = [this.form.typeId]
      this.form.status = status  //0-暂存

      if (this.form.gradeClass !== undefined && this.form.gradeClass !== null) {
        if (this.form.gradeClass === '高中') {
          this.form.study = this.form.study[1]
        } else if (this.form.gradeClass === '初中'){
          this.form.study = this.form.study.toString().replace(',', '/')
        }
      }

      this.form.title = '课堂编号:' + this.form.classNumber + ' 上课日期:'  + this.form.classDate + '的记录'
      this.form.content = '<p>' + '课堂编号:' + this.form.classNumber + '</p>'
        + '<p>' + '上课日期:' + this.form.classDate + '-' + '时间:' + this.form.startTime  + ' 到 ' + this.form.endTime +  '</p>'
        + '<p>' + '学生:' + this.selectedLabels.join(',') + '-人数:' + this.selectedLabels.length +    '</p>'
        + '<p>' + '上课内容:' + this.form.text +  '</p>'
        + '<p>' + '课后作业:' + this.form.homework +  '</p>'
        + '<p>' + '年级:' + this.form.gradeClass + '-课后单词背诵:' + this.form.study +  '</p>'

      // console.log(this.formData)

      let studentCommit = {}
      this.selectedLabels.forEach((item,index) => {
        // console.log(item)
        let element = this.selectStudentsList[index];
        // console.log(element)
        studentCommit[item] = this.formData[element];
      })

      //对学生的评论
      this.form.contentMarkdown = JSON.stringify(studentCommit)

      if (this.form.blogPic !== undefined && this.form.blogPic !== null && this.form.blogPic !== '') {
        this.form.blogPic = this.form.blogPic.join()
      }

      // console.log(this.form.students)
      // console.log(this.form.contentMarkdown)

      addBlog(this.form).then(response => {
        // console.log(response)
        if (response.code === 200) {
          this.$modal.msgSuccess('提交成功')
          this.classRecordWindow = false
          this.uploadStudentRecord = []
          this.getBlogList()
        }
      })
    },
    cancelForm() {
      this.examWindow = false
      this.studentWindow = false
      this.cooperateWindow = false
      this.wordCheckResult = false
      this.classRecordWindow = false
      this.customerRecordResult = false
      this.relationInfoResult = false
    },
    getMessagePage() {
      let routeUrl = this.$router.resolve({
        path: '/cms/main/message'
      })
      window.open(routeUrl.href, '_blank')
    },
    getRecordPage() {
      this.open = true
      this.openType = false
      this.reset()
    },
    getRecordType() {
      this.openType = true
    },
    getWordCheckWindow() {
      this.openType = false
      this.wordCheckResult = true
    },
    getCooperateWindow() {
      this.openType = false
      this.cooperateWindow = true
    },

    // 根据标签value获取label（用于显示输入框label）
    getTagLabel(tagValue) {
      const tag = this.studentList.find(item => item.studentId === tagValue);
      return tag ? tag.studentName : '学生姓名';
    },
    getStudent_multiple(val) {
      const count = val.length
      if (!count || count < 1) {
        // 清空数据
        this.inputItems = [];
        this.formData = {};
        return;
      }
      // 生成对应数量的输入框数据
      this.inputItems = Array.from({ length: count }, (_, i) => ({
        index: val[i]
      }));

      // console.log(this.inputItems);
      // 初始化表单数据
      this.formData = {};
      this.inputItems.forEach((item, index) => {
        this.$set(this.formData, item.index, '');
      });
      // console.log(this.inputItems);
      // this.selectedLabels = this.studentList
      //   .filter(option => val.includes(option.studentId))
      //   .map(option => option.studentName);
      //选择学生时清空对学生照片的记录
      this.uploadStudentRecord = []
      this.selectStudentsList = val
      this.selectedLabels = []
      this.selectStudentsList.forEach(item => {
        let name = this.studentList.find(op => op.studentId === item)['studentName']
        this.selectedLabels.push(name)
      })
      // console.log(this.selectStudentsList);
      // console.log(this.selectedLabels);
    },
    getClassRecordWindow() {
      // console.log('---')
      this.openType = false
      this.form.blogPic = []
      this.classRecordWindow = true
    },
    login() {
      let token = getToken()
      if (token == null || token === '') {
        this.isLoginState = false
      } else {
        this.isLoginState = true
      }
    },
    //图片地址修改
    picSrc(blogList) {
      for (let i = 0; i < blogList.length; i++) {
        let blogInfo = blogList[i]
        if (blogInfo.blogPic !== null && blogInfo.blogPic.length > 0) {
          blogList[i].blogPic = process.env.VUE_APP_BASE_API + blogInfo.blogPic
        } else {
          blogList[i].blogPic = '../../assets/images/dark.svg'
        }
      }
      return blogList
    },
    compare(property) {
      return function (a, b) {
        let value1 = a[property].length
        let value2 = b[property].length
        return value2 - value1
      }
    },
    // 获取成长记录类型列表
    async getTypeList() {
      getBlogDetail(this.$route.query.id).then(response => {
        for (let i = 0; i < response.types.length; i++) {
          let typeInfo = response.types[i]
          if (typeInfo.typePic.length > 0) {
            response.types[i].typePic = process.env.VUE_APP_BASE_API + typeInfo.typePic
          }
        }
        const {
          data: res
        } = response
        this.fullTypeList = response.types
        this.typeList = response.types.slice(0, 4)
        // console.log(this.typeList)
      })
    },
    // 获取成长记录标签列表
    async getTagList() {
      getBlogDetail(this.$route.query.id).then(response => {
        const {
          data: res
        } = response
        this.fullTagList = response.tags
        this.tagList = response.tags.slice(0, 4)
        // console.log(this.tagList)
      })
    },
    // 跳转到成长记录详情页
    getBlogInfo(blogId) {
      let routeUrl = this.$router.resolve({
        path: '/cms/main/blog',
        query: {
          id: blogId
        }
      })
      window.open(routeUrl.href, '_blank')
    },

    // 按校区筛选成长记录
    async selectType(cmsType) {
      let loadingInstance = Loading.service({
        target: '.left-item'
      })
      this.typeId = cmsType.typeId
      cmsListByTypeId(this.typeId).then(response => {
        this.blogList = this.picSrc(response.rows)
        this.total = response.total
        this.selectMethod = '校区: ' + cmsType.typeName
        this.selected = true
      }).finally(() => {
        loadingInstance.close()
      })
    },
    // 按标签筛选成长记录
    async selectTag(tag) {
      let loadingInstance = Loading.service({
        target: '.left-item'
      })
      this.tagId = tag.tagId
      cmsListByTagId(this.tagId).then(response => {
        this.blogList = this.picSrc(response.rows)
        this.total = response.total
        this.selectMethod = '标签: ' + tag.tagName
        this.selected = true
      }).finally(() => {
        loadingInstance.close()
      })
    },
    // 更新成长记录列表
    updateBlogList() {
      this.selected = false
      this.typeId = -1
      this.tagId = -1
      this.selectMethod = '全部成长记录'
      this.getBlogList()
    },
    // 得到所有的标签
    async getFullTagList() {
      this.tagList = this.fullTagList
    },
    async dealType() {
      if (this.moreType) {
        this.typeList = this.fullTypeList
      } else {
        this.typeList = this.fullTypeList.slice(0, 4)
      }
      this.moreType = !this.moreType
    },
    async dealTag() {
      if (this.moreTag) {
        await this.getFullTagList()
      } else {
        this.tagList = this.fullTagList.slice(0, 4)
      }
      this.moreTag = !this.moreTag
    },
    // 屏幕尺寸变化的监听函数
    screenAdapter() {
      this.screenWidth = document.documentElement.clientWidth
    },
    // 取消按钮
    cancel() {
      this.$confirm('是否放弃此次编辑？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let fileids = this.fileIds
        if (fileids.length > 0) {
          delFileInfo(fileids)
        }

        this.fileIds.length = 0
        this.top = false
        this.open = false
        this.blogFilesOpen = false
        this.reset()
      }).catch(() => {
      })
    },
    getFileId(data) {
      this.fileIds.push(data)
    },
    /* 得到所选学生的信息 */
    getSelectStudent() {
      let obj = this.studentList.find(item => item.studentId === this.form.studentId)
      this.form.studentName = obj.studentName
    },
    /** 发布按钮 */
    releaseForm() {
      this.$refs['form'].validate(valid => {
        console.log(this.form)
        if (valid) {
          this.$modal.confirm('是否确认提交？').then(() => {
            this.form.type = 1
            this.form.status = 1
            if (this.top) {
              this.form.top = 1
            } else {
              this.form.top = 0
            }
            if (this.form.contentType === '2') {
              this.setFormContent()
            }
            if (this.form.blogFilesNew.length > 0) {
              this.form.blogFiles = JSON.stringify(this.form.blogFilesNew)
            }
            addBlog(this.form).then(response => {
              if (this.fileIds.length > 0) {
                let fileBlogInfo = {
                  blogId: response.data,
                  fileIds: this.fileIds
                }
                addFileBlogInfo(fileBlogInfo).then(response => {
                })
              }
              this.$modal.msgSuccess('提交成功')
              this.fileIds.length = 0
              this.open = false
              this.getBlogList()
            })
          }).catch(() => {
          })
        }
      })
    },
    /** 暂存按钮 */
    saveForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$modal.confirm('是否确认暂存？').then(() => {
            this.form.type = 1
            this.form.status = 0
            if (this.top) {
              this.form.top = 1
            } else {
              this.form.top = 0
            }
            if (this.form.contentType === '2') {
              this.setFormContent()
            }
            if (this.form.blogFilesNew.length > 0) {
              this.form.blogFiles = JSON.stringify(this.form.blogFilesNew)
            }
            addBlog(this.form).then(response => {
              if (this.fileIds.length > 0) {
                let fileBlogInfo = {
                  blogId: response.data,
                  fileIds: this.fileIds
                }
                addFileBlogInfo(fileBlogInfo).then(response => {
                })
              }
              this.$modal.msgSuccess('暂存成功')
              this.fileIds.length = 0
              this.open = false
              this.getBlogList()
            })
          }).catch(() => {
          })
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        title: null,
        type: 1,
        content: null,
        top: '0',
        views: null,
        status: '0',
        blogDesc: null,
        blogFiles: null,
        blogPicType: '0',
        blogPic: null,
        blogPicLink: null,
        tagIds: [],
        typeIds: [],
        blogFilesNew: [],
        contentType: '1',
        contentMarkdown: null
      }
      this.resetForm('form')
    },
  }
}
</script>

<style scoped>
.tmp {
  white-space: nowrap; /* 强制单行显示 */
  text-overflow: ellipsis; /* 超出部分省略号表示 */
  overflow: hidden; /* 超出部分隐藏 */
  width: 360px; /* 设置显示的最大宽度 */
  display: inline-block; /* 将 span 转换为行内块级元素 */
}

:root {
  --primary: #4285f4; /* 主色调 - 蓝色 */
  --primary-dark: #3367d6; /* 主色调加深 - 深蓝色 */
}

.search_input {
  position: relative;
  box-sizing: border-box;
}

/* 窗口可视区域小于1000隐藏搜索框 */
@media screen and (max-width: 1000px) {
  .search_input {
    display: none;
  }
}

.search_input ul {
  position: absolute;
  top: 30px;
  width: 100%;
  border: 1px solid #e5e9ef;
  margin-top: 1px;
  background: #fff;
  z-index: 10000;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(58, 118, 142, 0.16);
  padding: 10px 0;
  font-size: 14px;
  box-sizing: border-box;
}

.search_input ul li {
  padding: 0 16px;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  word-wrap: break-word;
  word-break: break-all;
  display: block;
  color: #222;
  position: relative;
  /*transition: .2 ease;*/
}

.search_input ul li:hover {
  background-color: #e8f3ff;
}

/* 按钮容器样式 */
.fixed {
  position: fixed; /* 固定定位 */
}

.bottom-6 {
  bottom: 1.5rem; /* 距离底部24px (1rem = 16px) */
}

.right-6 {
  right: 1.5rem; /* 距离右侧24px */
}

.z-50 {
  z-index: 50; /* 层级较高，确保显示在最上层 */
}

/* 按钮样式 */
.w-14 {
  width: 7.0rem; /* 宽度56px */
}

.h-14 {
  height: 3.5rem; /* 高度56px */
}

.bg-primary {
  background-color: var(--primary); /* 使用主色调 */
}

.text-white {
  color: black; /* 文字颜色为白色 */
}

.rounded-full {
  border-radius: 9999px; /* 完全圆角，形成圆形 */
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* 较大阴影 */
}

.flex {
  display: flex; /* 弹性布局 */
}

.items-center {
  align-items: center; /* 垂直居中 */
}

.justify-center {
  justify-content: center; /* 水平居中 */
}

/* 过渡动画 */
.transition-all {
  transition-property: all; /* 所有属性变化都应用过渡 */
}

.duration-300 {
  transition-duration: 300ms; /* 过渡时间300毫秒 */
}

/* 悬停效果 */
.hover\:bg-primary-dark:hover {
  background-color: var(--primary-dark); /* 悬停时使用加深的主色调 */
}

.hover\:scale-110:hover {
  transform: scale(1.1); /* 悬停时放大10% */
}

/* 焦点状态 */
.focus\:outline-none:focus {
  outline: none; /* 移除默认焦点轮廓 */
}

.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px; /* 添加2px的环 */
}

.focus\:ring-primary:focus {
  box-shadow: 0 0 0 2px var(--primary); /* 环的颜色为主色调 */
}

.focus\:ring-opacity-50:focus {
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.5); /* 环的透明度为50% */
}

/* 旋转效果 */
.rotate-45 {
  transform: rotate(45deg); /* 旋转45度 */
}

.welcome {
  background-color: rgba(0, 0, 0, 0.1);
  border: none;
  height: 90%;
  position: relative;
}

.border {
  width: 812px;
  height: 112px;
  position: absolute;
  top: -6px;
  left: -6px;
  border: 3px solid white;
  box-sizing: border-box;
  animation: clipMe 5s linear infinite;
}

.tit {
  box-sizing: border-box;
  position: relative;
  width: 800px;
  height: 100px;
  line-height: 100px;
  box-shadow: inset 0 0 0 1px white;
  margin: 40px auto;
  margin-top: 80px;
  color: white;
  text-align: center;
  font-size: 50px;
  font-weight: normal;
  letter-spacing: 10px;
}

.intro {
  letter-spacing: 5px;
  line-height: 50px;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  font-weight: normal;
  color: white;
}

.down {
  animation: bounce 2s infinite;
  animation-duration: 3s;
  font-size: 25px;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.down:hover {
  animation: none;
  cursor: pointer;
  box-shadow: 0 0 20px 0 white;
  transition: all .2s;
}

.left-item .pagination-container {
  background: rgb(255, 255, 255, 0)
}

@keyframes clipMe {

  0%,
  100% {
    clip: rect(0px, 806px, 6px, 0px);
  }

  25% {
    clip: rect(0px, 6px, 112px, 0px);
  }

  50% {
    clip: rect(112px, 812px, 112px, 0px);
  }

  75% {
    clip: rect(0px, 812px, 112px, 806px);
  }
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translate(-50%, 0);
  }

  40% {
    transform: translate(-50%, -30px);
  }

  60% {
    transform: translate(-50%, -15px);
  }
}


.blog-type-ul {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 0;
  border-radius: 5px;
}

.el-pagination {
  padding-bottom: 20px;
}


.el-card /deep/ .el-card__body {
  padding: 0;
}


.right-item {
  margin-bottom: 20px;
}

.blog-type-li:first-child {
  border-top: 1px solid rgba(179, 216, 255, 0.5);
}

.blog-type-li {
  border-bottom: 1px solid rgba(179, 216, 255, 0.5);
}

.more {
  text-align: center;
  color: #3a8ee6;
  padding: 8px;
}

.more:hover {
  cursor: pointer;
  color: #3a8ee6;
}

.blog-type-li:hover {
  background-color: rgba(213, 255, 255, 0.3);
  cursor: pointer;
}

.activeType {
  background-color: rgba(58, 142, 230, 0.3);
  cursor: pointer;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 15px 13px 0;
  border-bottom: 1px solid rgba(179, 216, 255, 0.5);

}

.tag-item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.tag {
  background-color: #ecf5ff;
  box-sizing: border-box;
  display: inline-block;
  height: 22px;
  padding: 0 10px;
  line-height: 22px;
  font-size: 10px;
  color: #409eff;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid #409eff;
  transition: .2s;
}

.sjx-outer {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #409eff;
  position: relative;
  transition: .2s;
}

.sjx-inner {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #ecf5ff;
  top: -6px;
  left: 1px;
  position: absolute;
  transition: .2s;
}

.tag-item:hover,
.activeTag {
  box-sizing: border-box;
}

.tag {
  color: white;
  background-color: #409eff;
  cursor: pointer;
}

.sjx-inner {
  border-right: 6px solid #409eff;
}

.blog-type-li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 40px;
}

.recommend-blog {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 0;
  border-radius: 5px;
}

.recommend-a {
  border-bottom: 1px solid rgba(34, 36, 38, .15);
  line-height: 40px;
  display: block;
  text-decoration: none;
  color: black;
}

.recommend-a:hover {
  color: #3a8ee6;
}

.total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: larger;
  font-weight: bold;
}

.titleIndex {
  display: flex;
  align-items: center;
}

.el-icon-back {
  font-weight: bolder;
  color: #3a8ee6;
  margin-right: 10px;
}

.el-icon-back:hover {
  cursor: pointer;
}

.blog-content:hover {
  border-left: 5px solid #3a8ee6;
  border-right: 5px solid #3a8ee6;
  background-color: rgba(58, 142, 230, 0.3);
  cursor: pointer;
}

.blog-content {
  padding: 10px;
  height: auto;
  border-bottom: 1px solid rgb(199, 163, 92);
  /*border-bottom: 1px solid rgba(34, 36, 38, .15);*/
  transition: .3s;
}

.el-image {
  border-radius: 5px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.blog-info {
  display: -webkit-box;
  align-items: center;
  font-size: 10px;
}

.user-info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  float: left;
}

.header {
  text-decoration: none;
  color: #3a8ee6;
  font-weight: bold;
}

.content-class {
  float: right;
  margin-right: 15px;
}

.blog-type {
  float: right;
  margin-left: auto;
}

.dialog-content {
  margin: 10px 0;
}

/* 列容器样式 */
.left-column, .right-column {
  height: 100%;
}

/* 列内容区域样式 */
.column-content {
  height: 100%;
  padding: 15px;
  /* 可选：添加背景色区分两列 */
  /* background-color: #f9f9f9; */
  border-radius: 4px;
}

.blog-tag {
  float: right;
  margin-left: auto;
}
</style>
